﻿<UserControl
    x:Class="ParentingTrackerApp.Views.CustomizingView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ParentingTrackerApp.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../Resources/Base.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid SizeChanged="MainGridOnSizeChanged">
        <Grid.RowDefinitions>
            <RowDefinition x:Name="ButtonRow"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0">
            <StackPanel.Resources>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="80"></Setter>
                </Style>
            </StackPanel.Resources>
            <Button Name="AddButton" Content="Add" Click="AddOnClicked">
                <ToolTipService.ToolTip>
                    <TextBlock>Add a new event type</TextBlock>
                </ToolTipService.ToolTip>
            </Button>
            <Button Click="ResetOnClicked" Content="Reset"
                    PointerEntered="RedHighlightButtonOnPointerEntered"
                    PointerExited="RedHighlightButtonOnPointerExited"
                    PointerCanceled="RedHighlightButtonOnPointerExited"
                    PointerCaptureLost="RedHighlightButtonOnPointerExited"
                    PointerReleased="RedHighlightButtonOnPointerExited">
                <ToolTipService.ToolTip>
                    <TextBlock>Reset the list to default</TextBlock>
                </ToolTipService.ToolTip>
            </Button>
        </StackPanel>
        <ListView Name="EventTypesList"
                  ItemsSource="{Binding EventTypes}"
                  CanReorderItems="True"
                  AllowDrop="True"
                  Grid.Row="1"
                  VerticalAlignment="Stretch"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid SizeChanged="ItemGridOnSizeChanged">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="MainCol"></ColumnDefinition>
                            <ColumnDefinition Width="40"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0" Orientation="Horizontal">
                            <Button Width="40" VerticalAlignment="Stretch"
                                    Background="{Binding Color, Converter={StaticResource ColorToBrushConverter}}" 
                                    Click="ColorPickerButtonOnClick">
                                <ToolTipService.ToolTip>
                                    <TextBlock>Choose a color for this type</TextBlock>
                                </ToolTipService.ToolTip>
                                <FlyoutBase.AttachedFlyout>
                                    <Flyout>
                                        <ComboBox ItemsSource="{Binding AvailableColors}" SelectedItem="{Binding SelectedColor, Mode=TwoWay}">
                                            <ComboBox.ItemTemplate>
                                                <DataTemplate>
                                                    <Grid>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="30" />
                                                            <ColumnDefinition/>
                                                        </Grid.ColumnDefinitions>
                                                        <Border Background="{Binding Color, Converter={StaticResource ColorToBrushConverter}}">
                                                            <TextBlock Grid.Column="0"/>
                                                        </Border>
                                                        <TextBlock Text="{Binding Name}" Grid.Column="1"></TextBlock>
                                                    </Grid>
                                                </DataTemplate>
                                            </ComboBox.ItemTemplate>
                                        </ComboBox>
                                    </Flyout>
                                </FlyoutBase.AttachedFlyout>
                            </Button>
                            <TextBox Background="{Binding Color, Converter={StaticResource ColorToBrushConverter}}" 
                                 Foreground="{Binding Color, Converter={StaticResource FontInverseColorToBrushConverter}}"
                                 Text="{Binding Name, Mode=TwoWay}" Name="NameText">
                            </TextBox>
                        </StackPanel>
                        <Button Grid.Column="1" Content="&#xE106;" FontFamily="Segoe UI Symbol" 
                                Width="40" Click="DelOnClicked"
                                PointerEntered="RedHighlightButtonOnPointerEntered"
                                PointerExited="RedHighlightButtonOnPointerExited"
                                PointerCanceled="RedHighlightButtonOnPointerExited"
                                PointerCaptureLost="RedHighlightButtonOnPointerExited"
                                PointerReleased="RedHighlightButtonOnPointerExited"></Button>
                    </Grid>
                    
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</UserControl>
